<template>
  <el-container>
    <el-header style="background-color: #3e73a7;height: 30px; display: flex; align-items: center;">
      <h1 class="sidebar-title" >ECP管理系统</h1>
      </el-header>
    <el-container>
      <el-aside class="scrollbar-wrapper el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
        <el-menu
          router
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="margin-left: -24px;margin-top: -11px;"
        >
          <el-submenu  
           :index="menu.id+''" v-for="menu in menuList" :key="menu.id+''">
            <template slot="title">
              <i :class="menu.icon"></i>
              <span>{{ menu.name }}</span>
            </template>
            <el-menu-item style="line-height:20px;"
            :index="cmenu.link" :key="cmenu.id+''" v-for="cmenu in menu.childrenMenu">{{ cmenu.name }}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main style="background-color: white;">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>



export default {
  data(){
    return{
      //*定义数据，菜单从数据里循环出来  tr 
      //*找出一级菜单和二级菜单的循环体
      menuList:[
        // {id:'1',name:'公共模块',icon:'el-icon-warning-outline',
        // childrenMenu:[
        // {id:'2',name:'问卷',link:'zxc'},
        // {id:'3',name:'资料中心',link:'sss'},
      ]
    }
    // {
    //   id:'4',name:'管理',icon:'el-icon-warning-outline',
    //   childrenMenu:[
    //     {id:'5',name:'目标',link:'gf'}
    //   ]
    // }
      // ]
  // }
  },
methods:{
  //*查询用户端有的
  queryUserMenu(){
    this.$axios.get("api/menu/queryAll")
  .then(res =>{
    console.log(res.data);
    if(res.data.code == 200){
      this.menuList = res.data.data;
    }
    else if(res.status == 404){
                this.$router.push({ path: '/404'});
              }
  })
  }
  
},
created(){
  this.queryUserMenu();
}

}
</script>

<style scoped>
/* 自定义样式 */

/* 为整个页面添加背景颜色 */
body {
  background-color: #f0f0f0;
}


/* 自定义侧边栏菜单样式 */
.el-menu-vertical-demo {
  background-color: #545c64;
  color: #fff;
  width: 284px; /* 根据需要调整宽度 */
}

.el-menu-vertical-demo i {
  font-size: 16px;
}

/* 自定义菜单项样式 */
.el-menu-item, .el-submenu__title {
  padding: 12px 20px; /* 根据需要调整内边距 */
}

.el-menu-item, .el-submenu__title:hover {
  background-color: #333;
}

/* 自定义滚动条样式 */
.scrollbar-wrapper {
  overflow-x: hidden !important;
  /* 根据需要添加滚动条样式 */
}

/* 自定义主内容区域样式 */
.el-main {
  background-color: darkgray;
  padding: 20px; /* 根据需要调整内边距 */
}

/* 添加更多自定义样式规则根据需求 */

.sidebar-title {
      display: inline-block;
      margin: 0;
      color: #fff;
      font-weight: 600;
      line-height: 50px;
      font-size: 14px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      vertical-align: middle;
    }

</style>
